<template>
  <view class="parking-map-container" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
    <img src="http://qhm8yvarq.hn-bkt.clouddn.com/map/map-3m.jpg" alt="" srcset="" :style="{
      width: width,
      height: height,
      top: top + 'px',
      left: left + 'px'
    }">
    <view class="control-btn push" @click="scalingUp">+</view>
    <view class="control-btn subtract" @click="scalingDown">-</view>
    <view class="control-btn parking" @click="showParkingList">P</view>
    <popup ref="parkingListDialop" :animation="true" type="bottom" :maskClick="true">
      <view class="list-container">
        <list>
          <view class="list-item">P1 - 总车位：100 ｜ 空余车位：100</view>
        </list>
        <list>
          <view class="list-item">P2 - 总车位：100 ｜ 空余车位：100</view>
        </list>
        <list>
          <view class="list-item">P3 - 总车位：100 ｜ 空余车位：100</view>
        </list>
      </view>
    </popup>
  </view>
</template>
<script lang="ts">
import Vue from 'vue';

import Popup from '../../components/uni-popup/uni-popup.vue';
import List from '../../components/uni-list/uni-list.vue';

export default Vue.extend({
  components: { Popup, List },
  data() {
    return {
      width: "auto",
      height: "auto",
      left: 0,
      top: 0,
      startX: 0,
      startY: 0,
      imageScaling: 1,

      ismove: false,
      parkingListDialopVisible: false
    };
  },
  mounted() {
    this.initImage();
  },
  methods: {
    initImage() {
      if (window.innerWidth > window.innerHeight) {
        this.width = 100 * this.imageScaling + "%";
        this.height = "auto";
      } else {
        this.width = "auto";
        this.height = 100 * this.imageScaling + "%";
      }
    },
    touchmove(e: any) {
      if (this.ismove) {
        console.log(e);
        this.left = this.left + (e.changedTouches[0].pageX - this.startX);
        this.top = this.top + (e.changedTouches[0].pageY - this.startY);
        this.$nextTick(() => {
          this.startX = e.changedTouches[0].pageX;
          this.startY = e.changedTouches[0].pageY;
        });
      }
    },
    touchstart(e: any) {
      console.log(e);
      this.ismove = true;
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
    },
    touchend(e: any) {
      console.log(e);
      this.ismove = false;
    },
    scalingUp() {
      this.imageScaling = this.imageScaling * 2;
      this.initImage();
    },
    scalingDown() {
      this.imageScaling = this.imageScaling / 2;
      this.initImage();
    },
    showParkingList() {
      (this.$refs['parkingListDialop'] as any).open();
    }
  }
})
</script>
<style scoped>
.parking-map-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.parking-map-container img {
  position: absolute;
}

.control-btn {
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background-color: #006b65;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.control-btn.push {
  bottom: 15px;
  right: 101px;
}

.control-btn.subtract {
  bottom: 15px;
  right: 58px;
}

.control-btn.parking {
  bottom: 15px;
  right: 15px;
}

.list-container {
  padding-bottom: 30px;
  background-color: #c8c7cc;
}

.list-item {
  color: #666666;
  font-size: 14px;
  padding: 15px 15px;
}
</style>